<template>
	<view class="">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title=" " :background="{ background: '#f8f8f8' }">
			<view class="slot-wrap">
				<u-search
					:focus="true"
					@custom="clickCancel"
					placeholder="搜索..."
					shape="square"
					:action-style="{ color: '#5E6A89' }"
					action-text="取消"
					:bg-color="'#ffffff'"
					v-model="search_word"
				></u-search>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="status_bar"></view>
		<view class="content_search">
			<u-search
				:focus="true"
				@custom="clickCancel"
				placeholder="搜索"
				shape="square"
				:action-style="{ color: '#007aff' }"
				action-text="取消"
				:bg-color="'#ffffff'"
				v-model="search_word"
			></u-search>
		</view>
		<!-- #endif -->
		
		<!-- 内容 -->
		<view class="content">
			
			<!-- 搜索指定内容 -->
			<view>
				<text class="u-demo-block__title">搜索指定内容</text>
			</view>
			<view class="u-line">
				<u-line ></u-line>
			</view>
			<view class="block__content">
			    <u-row
			            justify="space-between"
			            gutter="10"
			    >
			        <u-col span="3">
			            <view >朋友圈</view>
			        </u-col>
			        <u-col span="3">
			            <view >公众号</view>
			        </u-col>
			        <u-col span="3">
			            <view >小程序</view>
			        </u-col>
			        <u-col span="3">
			            <view >视频号</view>
			        </u-col>
			    </u-row>
			</view>
			
			<!-- 最近再搜 -->
			<view class="zjzs">
				<view class="u-demo-block__title">
				    <u-row
				        justify="space-between"
				        gutter="10"
				    >
				        <u-col span="8">
				            <view>最近再搜</view>
				        </u-col>
				        <u-col span="2">
				            <view>展开
								<u-icon style="margin-left: 10rpx; "  name="arrow-down" color="#acb0b0" size="18"></u-icon>
							</view>
				        </u-col>
				        <u-col span="2" style="border-left: solid 1px #ebeeee;">
				            <view style="text-align: center;">
								<u-icon  name="trash" color="#acb0b0" size="40"></u-icon>
							</view>
				        </u-col>
				    </u-row>
				</view>
			    <view class="u-line">
			    	<u-line ></u-line>
			    </view>
				<view class="u-zjzs-content">
				    <u-row
				        justify="space-between"
				        gutter="10"
				    >
				        <u-col span="6">
				            <view><u-icon style="margin-right: 10rpx;" name="clock" color="#acb0b0" size="38"></u-icon>情话聊天工具</view>
				        </u-col>
				        <u-col span="6">
				            <view><u-icon style="margin-right: 10rpx;" name="clock" color="#acb0b0" size="38"></u-icon>csdn</view>
				        </u-col>
				    </u-row>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			search_word: ''
		};
	},

	methods: {
		clickCancel() {
			this.$u.route({
				type: 'navigateBack'
			});
		}
	},
	onShow() {}
};
</script>

<style lang="scss" scoped>
	@import './index.scss'
</style>
